<!--
 * @LastEditors: yuSeen
 * @LastEditTime: 2021-12-28 09:48:53
 * 天凉好个秋
-->
<template>
    <a-popover :visible="showPopup" trigger="focus" placement="bottom" :color="bgColor">
        <div class="user no-drag">
            <!-- 已登陆 -->
            <template v-if="userStore.isLogin">
                <div class="avatar trans">
                    <img :src="userStore.userInfo.avatarUrl" alt="头像" />
                </div>
                <div class="userInfo whitespace-nowrap trans">
                    <span>{{ userStore.userInfo.nickname }}</span>
                    <SvgIcon name="triangle" size="9" class="triangle"></SvgIcon>
                </div>
            </template>
            <!-- 未登录 -->
            <template v-else>
                <div class="avatar unlogin trans" @click="toLogin">
                    <SvgIcon name="user-icon" size="25" fill="#fff"></SvgIcon>
                </div>
                <div class="toLogin whitespace-nowrap trans" @click="toLogin">
                    <span>{{ t("navbar.user.login") }}</span>
                </div>
            </template>
        </div>
    </a-popover>

    <a-modal v-model:visible="loginModalVisible" :footer="null" :closable="false" :bodyStyle="loginModalStyle" destroyOnClose width="350px">
        <Login @close="loginModalVisible = false" />
    </a-modal>
</template>

<script lang='ts' setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from '@/hooks/locales/useI18N'
import { useSettingStore } from '@/store/setting'
import { useUserStore } from '@/store/user'
import { bgColorEnum } from '@/types/design/popoverType'
import config from '@/config/config';
import SvgIcon from '../svgIcon/svgIcon.vue'
import Login from '@/views/login/login.vue'

//@ts-ignore
const ipcRenderer = window.ipcRenderer;
const isElectron = config.isElectron  //是否在electron环境

const router = useRouter()
const { t } = useI18n()
const settingStore = useSettingStore()
const userStore = useUserStore()

// 气泡背景颜色
const bgColor = computed(() => settingStore.isDark ? bgColorEnum.DARK : bgColorEnum.LIGHT)
// 是否显示与用户信息弹窗
const showPopup = ref(false)
// 是否展示用户登录对话框
const loginModalVisible = ref(false)
// 登录弹窗样式
const loginModalStyle = {
    width: '350px',
    height: '530px',
    padding: '0'
}

// 创建登录窗口
const toLogin = () => {
    if(isElectron) {    //electron环境，创建登录子窗口
        ipcRenderer.send('create-login-window')
    } else {    //浏览器环境，跳转登录路由
        loginModalVisible.value = true
    }
}
</script>

<style scoped lang='scss'>
.user {
    @apply flex items-center;
    font-size: 13px;
    color: rgba($color: #fff, $alpha: 0.8);
    .avatar {
        @apply flex justify-center items-end rounded-full overflow-hidden cursor-pointer;
        width: 30px;
        height: 30px;
        margin-right: 7px;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .unlogin {
        background-color: $active-bg-color;
    }

    .userInfo {
        display: flex;
        align-items: center;
        cursor: pointer;
        .triangle {
            fill: rgba($color: #909295, $alpha: 0.8);
            width: 8px;
            height: 8px;
            margin-left: 6px;
            margin-top: 2px;
        }
    }
}

</style>